<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>

<script>
    let str = 'aaa,bbb,ccc,aaabbb,aaaccc,aaabbbccc,aaaddd';

    /* 捕获分组指分组且保存分组，正则外通过`$组号`获取分组，其中组号以左括号为基准从1开始 */
    let groupReg1 = /([abc][abc][abc])/g;
    console.log(RegExp.$1);//空
    console.log(groupReg1.exec(str));//['aaa']
    console.log(RegExp.$1);//aaa
    console.log(groupReg1.exec(str));//['bbb']
    console.log(RegExp.$1);//bbb
    console.log(groupReg1.exec(str));//['ccc']
    console.log(RegExp.$1);//ccc

    console.log(str.replace(/(aaa)(bbb)/g, '$2_$1'));//aaa,bbb,ccc,bbb_aaa,aaaccc,bbb_aaaccc,aaaddd

    /* 非捕获分组指分组但不保存分组，通常非捕获分组的效率高于捕获分组，在左括号后加上?:可实现非捕获分组 */
    let groupReg2 = /(?:[abc][abc][abc])/g;
    console.log(RegExp.$1);//空
    console.log(groupReg2.exec(str));//['aaa']
    console.log(RegExp.$1);//空
    console.log(groupReg2.exec(str));//['bbb']
    console.log(RegExp.$1);//空
    console.log(groupReg2.exec(str));//['ccc']
    console.log(RegExp.$1);//空

    console.log(str.replace(/(?:aaa)(?:bbb)/g, '$2_$1'));//aaa,bbb,ccc,$2_$1,aaaccc,$2_$1ccc,aaaddd
</script>
</html>